<template>
	<view class="content" style="background-color: #fff;">
		<view class="top">
			<u-navbar scrollable=false :placeholder='true' bgColor="#ffffff" :autoBack="true" title="">
				<view slot="right" class="input_right flex relative">
					<!-- <u-input suffixIcon="camera" prefixIconStyle="font-size: 22px;color: #909399"
						customStyle="background-color: #f5f5f5;"
						suffixIconStyle="color: #909399;height:48rpx;width:48rpx;" border="" v-model="inputvalue"
						@change="change">
					</u-input> -->
				</view>
			</u-navbar>
		</view>
		<view class="container">
			<view class="flex" style="flex-wrap: wrap;">
				<view class="box fontS28">
					<view class="li " @click="reget(1)" :class="type==1?'bgcred cof':''">
						全部({{info.all_number}})
					</view>
					<view class="li flex elipes1" @click="reget(2)" :class="type==2?'bgcred cof':''">
						<u-icon name="clock" :color="type==2?'#fff':'#333'" size="30rpx"></u-icon>
						最新
					</view>
					<view class="li flex" @click="reget(3)" :class="type==3?'bgcred cof':''">
						<u-icon name="photo" :color="type==3?'#fff':'#333'" size="30rpx"></u-icon>
						<view class="flex">
							图片/视频({{info.image_number}})
						</view>
					</view>
				</view>
				<view class="box">
					<view class="li" @click="reget(4)" :class="type==4?'bgcred cof':''">
						好评({{info.good_number}})
					</view>
					<view class="li" @click="reget(5)" :class="type==5?'bgcred cof':''">
						中评({{info.the_number}})
					</view>
					<view class="li" @click="reget(6)" :class="type==6?'bgcred cof':''">
						差评({{info.poor_number}})
					</view>
				</view>

			</view>
			<view class="review  mt24" v-for="(item,index) in list" :key="index">
				<view class="li">
					<view class="li_box1 flexJBC">
						<view class="flex">
							<u-image :src="item.avatar" width='48rpx' height='48rpx' radius="24rpx"></u-image>
							<text class="name co9 fontS20"
								style="margin-left: 8rpx;">{{$my.hideName(item.nickname)}}</text>
						</view>
						<view class="">
							<u-rate readonly size="14" gutter="0" count="5" v-model="item.start"></u-rate>
						</view>
					</view>
					<view class="li_text" style="margin:8rpx 0 16rpx ;">
						{{item.comment_text}}
					</view>
					<view class="" style="padding: 0;">
						<!-- @click="$my.go('/myPackageA/goodsAndFacton/evaluate/comment?id='+item.id)" -->
						<view class="flex" style="flex-wrap: wrap;">
							<u-image :style="{marginRight:indexx==(4*indexx-1)?'0rpx':'17rpx',marginBottom:'20rpx'}"
								:src="itemm" width='144rpx' height='144rpx' radius="8rpx"
								v-for="(itemm,indexx) in item.image" :key="indexx"  @click="clickImg(item.image)"/>
						</view>
					</view>
					<view class="" v-if="item.reply">
						<text class="homeRed">
							商家回复：
						</text>
						<text class="">
							{{item.reply}}
						</text> 
					</view> 
					<view class="other co9" style="margin-top: 20rpx;">
						<text style="margin-right: 40rpx;">{{item.create_time}}</text>
						<text>{{item.product_detail}}</text>
					</view>
				</view> 
			</view>
		</view>
		<u-empty width='162px' height="140px" :show='list.length==0 && !pageLoading'
			customStyle="background:#f5f5f5;padding-top:100rpx"></u-empty>
		<!-- 加载页 -->
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
	</view>
</template>



<script>
	import Preview from '@/componentes/preview.vue'
	export default {
		components: {
			Preview
		},
		data() {
			return {
				pageLoading: true,
				type: 1,
				inputvalue: '',
				info: {}, //所有的评论信息
				list: [], //评论列表
				count: 5,
				value: 5,
				valtype: 1, //1是店铺 2是商品 3是工厂
				page: '1',
				limit: '10',
				id: '',
				imgUrl: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		onReachBottom() {
			this.page++;
			this.getlist()
		},
		methods: {
			clickImg(img) {
				uni.previewImage({
					urls:img, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			reget(type) { //根据类型获取[1:全部,2:最新,3:图片/视频,4好评,5中评,6差评]
				this.type = type.toString()
				this.list = [];
				this.page = 1;
				this.getlist()
			},
			getlist() {
				// 获取评价列表
				let info;
				let url;
				if (this.valtype == 2) {
					info = {
						product_id: this.id
					}
					url = '/index/storeComment/selectProductComment'
				} else if (this.valtype == 3 || this.valtype == 1) {
					info = {
						store_id: this.id,
					}
					url = '/index/storeComment/getStoreComment'
				}
				this.$my.post(url, Object.assign(info, {
					page: this.page,
					limit: this.limit,
					type: this.type,
				})).then(res => {
					this.pageLoading = false;
					console.log(res.code);
					if (res.code == 200) {
						this.info = res.data.result
						this.list = this.list.concat(res.data.data)
					}
				})
			}

		},
		onLoad(option) {
			this.id = option.id;
			this.valtype = option.type ? option.type : 1
			this.getlist()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 24rpx;
	}

	// /deep/.u-image{
	// 	height: 144rpx !important;
	// 	margin-right: 0 !important;
	// }
	/deep/.input_right {
		width: 180%;
		// border: 1px solid red;
		height: 80rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 20rpx;

	}

	/deep/.u-navbar__content__right {
		left: 10%;
	}

	.content {
		.top {
			// margin-bottom: 20rpx;

			.top_left {
				margin-right: 20rpx;

			}
		}

		.container {
			padding: 0 4%;
			background: rgb(245, 245, 245);
			// border: 1px solid red;

			.box {
				width: 100%;
				padding-top: 24rpx;
				// height: 800rpx;
				display: flex;
				line-height: 56rpx;

				.li {
					flex-grow: 0;
					padding: 8rpx 16rpx;
					background-color: white;
					height: 56rpx;
					line-height: 56rpx;
					margin-right: 24rpx;
					border-radius: 32rpx;
					color: #666666;

					img {
						vertical-align: center;
					}
				}
			}

			.review {
				padding: 24rpx;
				background-color: white;
				border-radius: 16rpx;

				.li {
					margin-bottom: 30rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>
